{extend name="public/base"/}
{block name="style"}
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/index.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/style.css" />
	<link  rel="stylesheet" type="text/css" href="__PUBLIC__/static/css/mbook/all_header.css" />
	<style>
	.tab-foot{
		color: #2e2e2e;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: rgb(255, 255, 255);
		border-top: 1px solid #f1f1f1;
		z-index: 1001;
		height: 50px;
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
		display: -ms-flexbox; /* TWEENER - IE 10 */ 
		display: -webkit-flex; /* NEW - Chrome */ 
		display: flex;

	}
	.foot-li{
		font-size: 12px;
		display: inline-block;
		width: 24%;
		text-align: center;
		padding: 5px 0;
		color: #5c5c5c;
		-webkit-box-flex: 0.2; /* OLD - iOS 6-, Safari 3.1-6 */ 
		-moz-box-flex: 0.2; /* OLD - Firefox 19- */  
		-webkit-flex: 0.2; /* Chrome */ 
		-ms-flex: 0.2; /* IE 10 */ 
		flex: 0.2;
	}
	.foot-li span{
		display: inline-block;
		width: 22px;
		height: 22px;
		text-align: center;
		background-size: 100%;
		margin-bottom: 4px;
	}
	.foot-li p{
		font-size: 12px;
	}
	.icon-1{
		background:url(/public/static/images/home_b.png) no-repeat center center;
	}
	.icon-2{
		background:url(/public/static/images/bookrack_b_1.png) no-repeat center center;
	}
	.icon-3{
		background:url(/public/static/images/person_b_1.png) no-repeat center center;
	}
	.icon-4{
		background:url(/public/static/images/sign-foot.png) no-repeat center center;
	}
	.icon-5{
		background:url(/public/static/images/rechange_b_2.png) no-repeat center center;
	}
	.add_color{
		color: #ffb85d;
	}
	.check_ticket{
		background:#fff;
	}
	.money_pic{
		position: relative;
		background: url(/public/static/images/zhuzhu_grey.png) no-repeat center center;
		display: inline-block;
		width: 70px;
		height: 70px;
		text-align: center;
		background-size: 100%;
	}
	.money_pic h3{
		margin-top: 35px;
		color: #c2c2c2;
		font-size: 16px;
		font-weight: bold;
	}
	.money_give{
		position: absolute;
		top: 0px;
		right: -55px;
		background: url(/public/static/images/qipao_grey.png) no-repeat center center;
		display: inline-block;
		width: 50px;
		height: 50px;
		text-align: center;
		background-size: 100%;
	}
	.money_give p{
		font-size: 10px;
		margin-top: 12px;
		color: #fff;
	}
	.paynum_list{
		width: 95%;
		margin: 0 auto;
	}
	.paynum_list li{
		width: calc( 100%/2 - 20px );
		padding: 0px 5px;
		border: 2px solid #c2c2c2;
		border-radius: 5px;
		display: inline-block;
		margin: 5px auto;
	}
	.money_num{
		border-bottom: 1px dashed #c2c2c2;
		margin: 0 auto;
		text-align: center;
		padding-right: 50px;
	}
	.give_ticket{
		padding: 5px;
		text-align: center;
	}
	.give_ticket p{
		font-size: 14px;
		color: #5c5c5c;
	}
	.add-color{
		font-size: 12px;
		color: #e91c32;
	}
	.add-month{
		padding: 0 3px;
		font-size: 16px;
		color: #e91c32;
	}
	.mark {
		position: absolute;
		top: 4px;
		left: 22px;
		-ms-transform: rotate(45.9deg);
		-moz-transform: rotate(45.9deg);
		-webkit-transform: rotate(45.9deg);
		-o-transform: rotate(45.9deg);
		transform: rotate(-15deg);
		font-weight: bold;
		color: #fff;
	}
	.check_out{
		border: 2px solid  #ffb85d !important;
	}
	.check_bottom{
		border-bottom: 1px dashed #ffb85d;
	}
	.check_h{
		color:#ffb85d !important; ;
	}
	.check_pic{
		position: relative;
		background: url(/public/static/images/zhuzhu_orange.png) no-repeat center center;
		display: inline-block;
		width: 70px;
		height: 70px;
		text-align: center;
		background-size: 100%;
	}
	.check_give{
		position: absolute;
		top: 0;
		right: -55px;
		background: url(/public/static/images/qipao_orange.png) no-repeat center center;
		display: inline-block;
		width: 50px;
		height: 50px;
		text-align: center;
		background-size: 100%;
	}
	.title_pay{
		margin: 0 10px;
		padding: 10px 0;
	}
	.pay_name{
		color: #868686;
		border-left: 8px solid #44b549;
		padding-left: 5px;
	}
	.balance{
		float: right;
		color: #868686;
		padding-right: 4px;
	}
	.clr_red{
		color: #e91c32;
		margin-right: 3px;
		font-size: 17px;
	}
	.duihuan{
		font-size:10px;
		color:#e91c32 ;
	}
	.title_bottom{
		border-bottom: 1px solid #cccccc;
	}
	.style-pic{
		position: relative;
		background: url(/public/static/images/weixin.png) no-repeat center center;
		display: inline-block;
		width: 20px;
		height: 20px;
		text-align: center;
		background-size: 100%;
	}
	.style-pic-zhi{
		position: relative;
		background: url(/public/static/images/zhifubao.png) no-repeat center center;
		display: inline-block;
		width: 20px;
		height: 20px;
		text-align: center;
		background-size: 100%;
	}
	.style-pic-qq{
		position: relative;
		background: url(/public/static/images/cai_qq.png) no-repeat center center;
		display: inline-block;
		width: 25px;
		height: 20px;
		text-align: center;
		background-size: 100%;
	}
	.style-down{
		position: relative;
		background: url(/public/static/images/jian-down.png) no-repeat center center;
		display: inline-block;
		width: 20px;
		height: 20px;
		text-align: center;
		background-size: 100%;
	}
	.style-up{
		position: relative;
		background: url(/public/static/images/jian-up.png) no-repeat center center;
		display: inline-block;
		width: 20px;
		height: 20px;
		text-align: center;
		background-size: 100%;
	}
	.check_style{
		background: #fff;
	}
	.style-name{
		vertical-align: top;
		color: #5c5c5c;
		margin: 0 5px 0 3px;
	}
	.pay_style_pic{
		width: 40px;
		height: 40px;
		border: 1px solid #868686;
		padding: 5px;
		border-radius: 50%;
	}
	.pay_style_pic img{
		width: 100%;
	}
	.style_list{
		text-align: center;
		padding: 5px 10px;
		display: none;
	}
	.style_list ul{
		padding: 5px 0 10px 0;
		border: 1px solid #ccc;
		border-top:none;
	}
	.style_list li{
		margin: 0 15px;
		display: inline-block;
	}
	.style_p{
		font-size: 14px;
		color: #868686;
		padding-top: 5px;
	}
	.cl_p{
		color: #ffb85d;
	}
	.check_pay_style{
		border: 1px solid #ffb85d;
	}
	.money-btn{
		width: 160px;
		height: 45px;
		background: #44B549;
		line-height: 45px;
		color: #fff;
		font-size: 18px;
		border: none;
                                    -webkit-box-flex: 0.4; /* OLD - iOS 6-, Safari 3.1-6 */ 
		-moz-box-flex: 0.4; /* OLD - Firefox 19- */  
		-webkit-flex: 0.4; /* Chrome */ 
		-ms-flex: 0.4; /* IE 10 */ 
		flex: 0.4;
	}
	.foot-btn{
		text-align: center;
		background: #fff;
		color: #2e2e2e;
		width: 100%;
		position: fixed;
		bottom: 50px;
		left: 0;
		border-top: 1px solid #f1f1f1;
		z-index: 1001;
		height: 45px;
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex;
	}
	.foot-btn h2{
		height: 45px;
		line-height: 45px;
		font-size: 16px;
		color: #5c5c5c;
                                     -webkit-box-flex: 0.6; /* OLD - iOS 6-, Safari 3.1-6 */ 
		-moz-box-flex: 0.6; /* OLD - Firefox 19- */  
		-webkit-flex: 0.6; /* Chrome */ 
		-ms-flex: 0.6; /* IE 10 */ 
		 flex: 0.6;

	}
	.foot-btn h2 span{
		font-size: 18px;
		color: #e91c32;
		padding: 0 3px;
	}
	.pay-fail{
		display: block;
		font-size: 13px;
		color: #e91c32;
		float: right;
	}
	.reading_mark{
		background: #fff;
		margin-bottom: 5px;
		padding: 10px;
		display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox; /* TWEENER - IE 10 */
		display: -webkit-flex; /* NEW - Chrome */
		display: flex;
	}
	.reading_mark p{
		font-size: 14px;
		display: inline-block;
		color: #868686;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		height: 25px;
		line-height: 25px;
	                  -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 1; /* OLD - Firefox 19- */
		-webkit-flex: 1; /* Chrome */
		-ms-flex: 1; /* IE 10 */
		flex: 1;
	}
	.reading_mark a{
		display: inline-block;
		width: 60px;
		height: 24px;
		line-height: 25px;
		margin: 0 5px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		background: #ffb85d;
		box-shadow: 1px 1px 1px #b07e3e;
		border-radius: 3px;
	}
	.other_module{
		height: 30px;
		background: #fff;
		line-height: 30px;
		padding: 5px 10px 50px 10px;
	}
	.agreement{
		font-size: 13px;
		color: #cccccc;
		float: left;
	}

</style>

<style>
		*{margin:0;padding:0;}
		body{max-width:768px;margin:auto;background:#fafafa}
		.table_all{display:table;width:100%;margin:auto;}
		.cell_all{display:table-cell}
		.row_all{display:table-row}
		.box_all{
			display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
			display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
			display: -ms-flexbox;      /* TWEENER - IE 10 */
			display: -webkit-flex;     /* NEW - Chrome */
			display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
			flex-flow: row wrap;
		}
		.wap_user{width:40px;
			height:40px;
		}

		.font-16{font-size:16px}
		.font-18{font-size:18px;}
		.font_20{font-size:20px}
		.font_28{font-size:28px}
		.font_33{font-size:33px;}
		.Money_button {
			width: 180px;
			height: 45px;
			background: #44B549;
			line-height: 45px;
			color: #fff;
			border-radius: 5px;
			display: block;
			clear: both;
			text-align: center;
			margin: 0 auto;
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 25px;
			border:none;
		}
		.footer{margin:auto;padding-top:15px;background:#fff;min-height:140px;border-top:5px solid #eee;}
		.footer a{color:#000;
			font-size:12px;width:100%;
			display:inline-block;
			/*font-size:12px;height:1em;line-height:1em;*/
		}
		.footer .auto li{width:calc( 100%/5 - 2px );text-align:center;}
		.footer .auto{margin:auto; border-bottom:1px solid #eee;padding-bottom:15px;}
		.center{text-align:center}
		/*li[class="cursor"]{border-right:1px solid #ccc;}*/
		.copy{margin:auto;width:100%;
			text-align: justify;
			font-size: 0;
			display:table;
		}
		.copy1{text-align:center;}
		.copy1 span{
			background:#008eea;
			color:#fff;
			width:30px;height:30px;line-height:30px;
			text-align:center;
			box-shadow:5px 5px 5px #bbb;
			border-radius:5px;
			display:inline-block;margin:10px 3px;
		}
		.copy li{
			line-height:30px;
			display: inline-block;
			text-align:center;
			width:25%;margin:0;
		}
		.a_boxr{border:solid #eee;border-width:0px 1px 1px 0px;}
		.a_box1{border:solid #eee;border-width:1px 1px 1px 1px }
		.a_box2{border:solid #eee;border-width:1px 1px 1px 0px;}
		.a_box3{border:solid #eee;border-width:0px 1px 1px 1px;}
		.copy li a{font-size:12px;margin:0;}

		.footer-pub{
			text-align: center;
			margin: auto;
			padding: 15px 0 20px 0;
		}
		.footer-pub a{
			border-right: 1px solid #4d4d4d;
			padding: 0 20px;
			font-size: 10px;
			color: #4d4d4d;
		}
	</style>


{/block}

{block name="body"}
	<div class="reading_mark"></div>
<div class="check_style">
	<div class="title_pay title_bottom">
		<span class="pay_name">充值方式</span>
		<span class="balance balance_click">
			<span class="style-pic"></span>
			<span class="style-name">微信</span>
			<span class="style-down"></span>
		</span>
	</div>
	<div class="style_list">
		<ul>
			<li data-type="alipay" id="alipay">
				<a href="javascript:void(0);"></a>
				<div class="pay_style_pic"><img src="/public/static/images/zhifubao.png" style="margin: 5px 0;width: 100%;"></div>
				<p class="style_p">支付宝</p>
			</li>
			<li class="on02" data-type="wxpay" id="h5wx">
				<a href="javascript:;"></a>
				<div class="pay_style_pic check_pay_style"><img src="/public/static/images/weixin.png" style="margin: 4px 1px;width: 98%;"></div>
				<p class="style_p cl_p">微信</p>
			</li>
			
		</ul>
	</div>
</div>
<div class="check_ticket">
	<div class="title_pay">
		<span class="pay_name">充值金额<span class="duihuan">（1元=100书币）</span></span>
		<span class="balance">余额：<span class="clr_red">{$egold}</span>{:config('virtualname')}  <span class="clr_red">{$egold}</span>书币</span>
	</div>
	<ul class="paynum_list">
		<li data-paynum="30" data-payTape="1">
			<a href="javascript:void(0);"></a>
			<div class="money_num">
				<div class="money_pic">
					<p class="mark">¥</p>
					<h3>30</h3>
					<div class="money_give"><p></p></div>
				</div>
			</div>
			<div class="give_ticket">
				<p>3000书币</p>
			</div>

		</li>
		
		<li data-paynum="50" data-payTape="1" class="check_out">
			<a href="javascript:void(0);"></a>
			<div class="money_num check_bottom">
				<div class="money_pic check_pic">
					<p class="mark">¥</p>
					<h3 class="check_h">50</h3>
					<div class="money_give check_give"><p>送10元</p></div>
				</div>
			</div>
			<div class="give_ticket">
				<p>5000书币<span class="add-color">+1000书券</span></p>
			</div>

		</li>
		
		<li data-paynum="100" data-payTape="1">
			<a href="javascript:void(0);"></a>
			<div class="money_num">
				<div class="money_pic">
					<p class="mark">¥</p>
					<h3>100</h3>
					<div class="money_give"><p>送25元</p></div>
				</div>
			</div>
			<div class="give_ticket">
				<p>1万书币<span class="add-color">+2500书券</span></p>
			</div>

		</li>
		
		<li data-paynum="500" data-payTape="1">
			<a href="javascript:void(0);"></a>
			<div class="money_num">
				<div class="money_pic">
					<p class="mark">¥</p>
					<h3>500</h3>
					<div class="money_give"><p>送200元</p></div>
				</div>
			</div>
			<div class="give_ticket">
				<p>5万书币<span class="add-color">+2万书券</span></p>
			</div>

		</li>
	</ul>
</div>
	
<div class="other_module">
	<a class="agreement">支付协议</a>
	<a  class="pay-fail tips" href="http://mp.weixin.qq.com/s?__biz=MzI2NjUyMDM5Nw==&amp;mid=2247483659&amp;idx=1&amp;sn=3d627266bbea311aecfaaa9676a8b2a1&amp;chksm=ea8d9329ddfa1a3f18f21ded1a24ff169f88a3c45ff313a93f674b36142b720ea5fcba1d6614#rd">支付失败？请点击此处>></a>
</div>
<div class="foot-btn">
	<h2>消费<span>50</span>元</h2>
	<a href="javascript:;" onclick="submitpay()" class="money-btn">立即支付</a>
</div>
    <div class="tab-foot">
		<a href="/" class="foot-li">
            <span class="icon-1"></span>
            <p>首页</p>
        </a>
        <a href="{:url('user/pay')}" class="foot-li">
            <span class="icon-5"></span>
            <p>充值</p>
        </a>
        <a href="{:url('books/booksfav')}" class="foot-li">
            <span class="icon-2"></span>
            <p class="add_color">书架</p>
        </a>
        <a href="{:url('user/index')}" class="foot-li">
            <span class="icon-3"></span>
            <p>我的</p>
        </a>
		<a href="{:url('user/mysign')}" class="foot-li">
			<span class="icon-4"></span>
			<p>签到</p>
		</a>

</div>

{/block}

{block name="script"}
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".check_ticket li ").each(function(index){
			$(this).click(function(){
				$(this).addClass("check_out").siblings().removeClass("check_out");
				$(this).find("div").filter(".money_num").addClass("check_bottom");
				$(this).find("div").filter(".money_pic").addClass("check_pic");
				$(this).find("div").filter(".money_give").addClass("check_give");
				$(this)	.siblings().find("div").filter(".money_num").removeClass("check_bottom");
				$(this)	.siblings().find("div").filter(".money_pic").removeClass("check_pic");
				$(this)	.siblings().find("div").filter(".money_give").removeClass("check_give");
				$(this).find("h3").addClass("check_h");
				$(this)	.siblings().find("h3").removeClass("check_h");

				onchange();

			})
		})
	})
	$(function(){
		$(".style_list li ").each(function(index){
			$(this).click(function(){
				$(this).find("div").filter(".pay_style_pic").addClass("check_pay_style");
				$(this)	.siblings().find("div").filter(".pay_style_pic").removeClass("check_pay_style");
				$(this).find("p").addClass("cl_p");
				$(this).siblings().find("p").removeClass("cl_p");
				$(this).addClass("on02").siblings().removeClass("on02");
				$(".style_list").hide();
				var pay =$(this).attr("data-type");
				var h_1 ='<span class="style-pic-zhi"></span><span class="style-name">支付宝</span><span class="style-down"></span>';
				var h_2 ='<span class="style-pic"></span><span class="style-name">微信</span><span class="style-down"></span>';
				if(pay=="alipay"){
					$(".balance_click").html(h_1)
				}else if(pay=="wxpay"){
					$(".balance_click").html(h_2)
				}

			})
		})
	})
	$(function(){
		$(".balance_click").click(function(){
			if($(".style_list").css("display")=="none"){
				$(".style_list").css("display","block");
				$(".style-down").addClass("style-up");
			}else{
				$(".style_list").css("display","none");
				$(".style-down").removeClass("style-up");
			}
		})
	})

</script>
<script>
	function submitpay() {
		var payurl = '{:url("payStatus")}';
		var paynum=$("#othermoney").val();
		if(paynum == ""||paynum==undefined)
		{
			paynum=$(".check_out").attr('data-paynum');
		}
		if(paynum <30)
		{
			alert("最小金额为30元");
			return true;
		}
		var paydivtype = $(".check_out").attr('data-payTape');
		paytype=$(".on02").attr('data-type');
		var url = '';
		if(paytype == 'alipay')
		{
			url= payurl+'?paytype='+paytype+'&amount='+paynum;
		}
		if(paytype == 'wxpay')
		{
			url= payurl+'?paytype='+paytype+'&amount='+paynum;
		}
		//alert(url);
		//return true;
		window.location.href=url;

	}
	function onchange() {
		var paynum=$("#othermoney").val();
		if(paynum == ""||paynum==undefined)
		{
			paynum=$(".check_out").attr('data-paynum');
		}
		$(".foot-btn span").html(paynum);
	}
	//$(".showmoney").bind('click', function(){onchange();});
	function is_weixin(){
		var ua = navigator.userAgent.toLowerCase();
		//alert(ua);
		if(ua.indexOf("micromessenger")>=1 ) {
			return true;
		} else {
			return false;
		}
	}
	var wx	=	is_weixin();
	if(wx){
		$(".tips").show();
		$('#h5wx').css('display','none');
	}else{
		$('#gzwx').css('display','none');
		$(".tips").css('display','none');
	}
</script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.cookie.js"></script>
<script  type="text/javascript" >
//继续阅读cookie
 if ($.cookie("history") != null) { 
     var cookieStr = $.cookie("history"); 
     var cookiereadbook =  eval("(" + cookieStr + ")");
	 var count = cookiereadbook.length;
	 console.log(cookiereadbook[count-'1']);
	 $(".reading_mark").html(' <p>上次读至:《'+cookiereadbook[count-'1'].book+'》'+cookiereadbook[count-'1'].title+'</p> <a target="_blank" href="'+cookiereadbook[count-'1'].url+'">继续阅读</a>');
}
</script>

{/block}